<template>
  <div class="toast">{{ message }}</div>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  name: "Toast",
  props: ["message"],
};
export const showToastEffect = () => {
  const toastData = reactive({ isShow: false, toastMessage: "" });
  const showToast = (msg) => {
    toastData.isShow = true;
    toastData.toastMessage = msg;
    const timer = setTimeout(() => {
      toastData.isShow = false;
      toastData.toastMessage = "";
      clearTimeout(timer);
    }, 2000);
  };
  const { isShow, toastMessage } = toRefs(toastData);
  return { showToast, isShow, toastMessage };
};
</script>
<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 35%;
  top: 305rem;
  max-height: 15rem;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 10rem;
  border-radius: 5rem;
  color: #fff;
}
</style>
